<template>
  <view>
    <!--选择收货地址的盒子-->
    <view class = "address-choose-box" v-if="JSON.stringify(address)==='{}'">
      <button type = "primary" size="mini" class = "btnChooseAddress" @click = "chooseAddress">请选择收货地址</button>
    </view>
    <!--渲染收获信息-->
    <view class = "address-info-box" v-else @click = "chooseAddress">
    <view class = "row1">
       <view class = "row1-left">
           <view class = "username">收货人：{{address.userName}}</view>
       </view>
       <view class = "row1-right">
           <view class = "phone"> 电话：{{address.telNumber}}</view>
           <uni-icons type= "arrowright" size = "16"></uni-icons>
       </view>
    </view>
    <view class = "row2">
         <view class="row2-left">收货地址：</view>
         <view class="row2-right">{{addstr}}</view>
    </view>
    </view>
    <image src = "../../static/cart_border.jpg" class="address-border"></image>
  </view>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
  export default {

    name:"my-address",
    data() {
      return {
          //address:{}
      };
    },
    methods:{
      ...mapMutations('m_user',['updateAddress']),
      async chooseAddress(){
          const [err,succ] = await uni.chooseAddress()
          if(err === null && succ.errMsg === 'chooseAddress:ok'){
            //this.address = succ
            this.updateAddress(succ)
          }
          console.log(err)
          if (err && err.errMsg === 'chooseAddress:fail cancel') {
           //调用这个方法，用户重新授权
              this.reAuth()
          }
      },
      //让用户重新授权
      async reAuth(){
         const [err2,confirmResult] = await uni.showModal({
           content:'检测到没打开地址授权，是否设置打开?',
           confirmText:'确认',
           cancelText:'取消'
         })
         
         if(err2) return
      },
    },

    computed:{
      ...mapState('m_user',['address']),
      ...mapGetters('m_user',['addstr'])
    }
  }
</script>

<style lang="scss">
   .address-border{
     display: block;
     width: 100%;
     height: 5px;
   }
   
   .address-choose-box{
     height:90px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .address-info-box{
     font-size: 12px;
     height: 90px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 5px;
     .row1{
       display: flex;
       justify-content: space-between;
       
       .row1-left{
         .username{}
       }
       .row1-right{
         display: flex;
         justify-content: space-between;
         .phone{}
       }
     }
     .row2{
       display: flex;
       align-items: center;
       margin-top: 10px;
       .row2-left{
         white-space: nowrap;
       }
       .row2-right{}
     }
   }
</style>
